<?php echo $header; ?>
<?php if ($error_warning) { ?>
    <div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="heading">
        <h1 style="background-image: url('view/image/attribute.png');"><?php echo $heading_title; ?></h1>
        <div class="buttons"><a onclick="$('#form').submit();" class="button"><span><?php echo $button_save; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_cancel; ?></span></a></div>
    </div>
    <div class="content">
        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
            <table class="form">
                <tr>
                    <td><span class="required">*</span> <?php echo $entry_name; ?></td>
                    <td>
                        <input type="text" name="name" value="<?php echo $name; ?>" />
                        <?php if ($error_name) { ?>
                            <span class="error"><?php echo $error_name; ?></span>
                        <?php } ?>
                    </td>
                </tr>
                <tr>
                    <td><span class="required">*</span> <?php echo $entry_description; ?></td>
                    <td>
                        <input type="text" name="description" value="<?php echo $description; ?>" />
                        <?php if ($error_description) { ?>
                            <span class="error"><?php echo $error_description; ?></span>
                        <?php } ?>
                    </td>
                    <input type="hidden" name="status" value="1" />
                </tr>                 
                <tr>
                    <td><span class="required">*</span> <?php echo $entry_sort_order; ?></td>
                    <td>
                        <input type="text" name="sort_order" value="<?php echo $sort_order; ?>" />
                        <?php if ($error_sort_order) { ?>
                            <span class="error"><?php echo $error_sort_order; ?></span>
                        <?php } ?>
                    </td>
                    <input type="hidden" name="status" value="1" />
                    <input type="hidden" id="is_color_group" name="is_color_group" value="0" /> 
                </tr>                 
                <?php if(1==0) { ?>
                <tr>
                    <td><?php echo $entry_status; ?></td>
                    <td>
                        <select name="status">
                            <?php if ($status) { ?>
                                <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                                <option value="0"><?php echo $text_disabled; ?></option>
                            <?php } else { ?>
                                <option value="1"><?php echo $text_enabled; ?></option>
                                <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                            <?php } ?>
                        </select>
                    </td>
                </tr>  
                <?php } ?> 
                <?php if(1==0) { ?> 
                <tr>
                    <td><?php echo $entry_is_color; ?></td>
                    <td>
                        <input type="checkbox" id="is_color_group" name="is_color_group" onclick="change_color_image();" <?php echo ($is_color_group ? 'checked="checked"' : ''); ?> />                        
                    </td>
                </tr>   
                <?php } ?>                             
                <tr>                         
                    <td colspan="2" style="border-top: 2px solid #CCCCCC;">                               
                        <h1 style="color:#000; float:left; font-size:16px; margin:0; padding:20px 0 0 50px;">
                            <?php echo $text_attribute_value; ?>
                        </h1>
                        <div style="float:left; margin:0; padding:20px 0 0 50px;">
                            <a onclick="addAttributeValue();" class="button"><span><?php echo $button_add; ?></span></a>
                        </div> 
                        <?php if ($error_attribute_values) { ?>
                            <div style="float:left; margin:0; padding:20px 0 0 50px;">
                                <span class="error"><?php echo $error_attribute_values; ?></span>
                            </div>                                
                        <?php } ?>                                              
                    </td>                       
                </tr>
                <?php $attrValue = 0; ?>                      
                <tr>
                    <td colspan="2" style="border-bottom: none;">
                        <table id="av_list" class="form" width="100%"> 
                            <?php if($attribute_values){ ?> 
                                <?php foreach($attribute_values as $item){ ?>                                    
                                    <tr id="av_row<?php echo $attrValue; ?>">  
                                        <td style="width:80px;"></td>
                                        <td width="28%">
                                            <?php echo $text_value_name; ?>&nbsp;&nbsp;
                                            <input type="text" id="av_name<?php echo $attrValue; ?>" name="attribute_values[<?php echo $attrValue; ?>][name]" value="<?php echo $item['name']; ?>" size="30" />
                                        </td>
                                        <td width="15%"> 
                                            <?php echo $text_value_sort; ?>&nbsp;&nbsp;
                                            <input type="text" id="av_sort<?php echo $attrValue; ?>" name="attribute_values[<?php echo $attrValue; ?>][sort_order]" value="<?php echo $item['sort_order']; ?>" size="2" />
                                        </td>
                                        <td width="20%" class="av_color_group" style="display:<?php echo ($is_color_group ? 'table-cell' : 'none'); ?>;">                                               
                                            <div class="av_color_group" style="display:<?php echo ($is_color_group ? 'block' : 'none'); ?>;">
                                                <?php //echo $text_value_color; ?>&nbsp;&nbsp;                                                
                                                <img id="av_color_preview<?php echo $attrValue; ?>" class="image" src="<?php echo $item['image_preview']['preview']; ?>" alt="" onclick="image_upload('av_color<?php echo $attrValue; ?>', 'av_color_preview<?php echo $attrValue; ?>');" style="margin-left:5px;" />
                                                <input type="hidden" id="av_color<?php echo $attrValue; ?>" name="attribute_values[<?php echo $attrValue; ?>][image]" value="<?php echo $item['image_preview']['file']; ?>" />                                                                                                
                                            </div>
                                        </td>
                                        <td width="*"> <!--style="width:130px;" -->
                                            <a onclick="removeAttributeValue('<?php echo $attrValue; ?>');" class="button">
                                                <span><?php echo $button_remove; ?></span>
                                            </a>
                                            <input type="hidden" id="av_id<?php echo $attrValue; ?>" name="attribute_values[<?php echo $attrValue; ?>][value_id]" value="<?php echo $item['value_id']; ?>" />
                                        </td>
                                    </tr>                                    
                                    <?php $attrValue++; ?>
                                <?php } ?>  
                            <?php } ?>                               
                        </table>  
                    </td>                  
                </tr>                   
            </table>            
        </form>
    </div>
</div>

<script type="text/javascript" src="view/javascript/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
//<!--
var row_index = <?php echo $attrValue; ?>;

function addAttributeValue(){
    var col_display = $('#is_color_group').is(':checked') ? 'table-cell' : 'none';
    var div_display = $('#is_color_group').is(':checked') ? 'block' : 'none';
    
    html  = '<tr id="av_row' + row_index + '">';
    html  +=    '<td style="width:80px;"></td>';
    html  +=    '<td width="28%">';
    html  +=        '<?php echo $text_value_name; ?>\u00A0\u00A0\u00A0';
    html  +=        '<input type="text" id="av_name' + row_index + '" name="attribute_values[' + row_index + '][name]" value="" size="30" />';
    html  +=    '</td>';
    html  +=    '<td width="15%">';
    html  +=        '<?php echo $text_value_sort; ?>\u00A0\u00A0\u00A0';
    html  +=        '<input type="text" id="av_sort' + row_index + '" name="attribute_values[' + row_index + '][sort_order]" value="" size="2" />';
    html  +=    '</td>';
    html  +=    '<td width="20%" class="av_color_group" style="display:' + col_display + ';">';
    html  +=        '<div class="av_color_group" style="display:' + div_display + ';">';
    html  +=            '<img id="av_color_preview' + row_index + '" class="image" src="<?php echo $no_image; ?>" alt="" onclick="image_upload(\'av_color' + row_index + '\', \'av_color_preview' + row_index + '\');" style="margin-left:14px;" />';
    html  +=            '<input type="hidden" id="av_color' + row_index + '" name="attribute_values[' + row_index + '][image]" value="<?php echo $no_image; ?>" />';
    html  +=        '</div>';
    html  +=    '</td>';
    html  +=    '<td width="*">';
    html  +=        '<a onclick="removeAttributeValue(\'' + row_index + '\');" class="button"><span><?php echo $button_remove; ?></span></a>';    
    html  +=        '<input type="hidden" id="av_id' + row_index + '" name="attribute_values[' + row_index + '][value_id]" value="0" />';
    html  +=    '</td>';
    html  += '</tr>';    
    
    $('#av_list').append(html);
    row_index++;
}

function removeAttributeValue(row_index){
    $('#av_row' + row_index).remove();
}

function image_upload(field, preview) {
    $('#dialog').remove();
    
    $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
    
    $('#dialog').dialog({
        title: '<?php echo $text_image_manager; ?>',
        close: function (event, ui) {
            if ($('#' + field).attr('value')) {
                $.ajax({
                    url: 'index.php?route=common/filemanager/image_color&token=<?php echo $token; ?>',
                    type: 'POST',
                    data: 'image=' + encodeURIComponent($('#' + field).attr('value')),
                    dataType: 'text',
                    success: function(data) {
                        $('#' + preview).attr('src', data);
                    }
                });
            }
        },    
        bgiframe: false,
        width: 700,
        height: 400,
        resizable: false,
        modal: false
    });
};

function change_color_image(){
    if($('#is_color_group').is(':checked')){
        $('.av_color_group').each(function(){
            $(this).show();
        });  
    }
    else{
        $('.av_color_group').each(function(){
            $(this).hide();
        });      
    }  
}
//-->
</script>
<?php echo $footer; ?>